<template>
  <dialog-edit :visible.sync="modalVisible" :title="formData.Id ? '认定工时' : '添加工时'" ref="userManageEdit" width="600"
               :height="formData.Id ? '450' : '360'" @save="save" :saveLoading="saveLoading" :destroyOnClose="true">
    <el-form slot="body" :rules="rules" ref="addFormCheck" :model="formData">
      <el-row :gutter="20" class="elrow">
        <el-col :span="12">
          <el-form-item label="工作时长" prop="Tasktime">
            <el-input class="input" type="text" v-model="formData.Tasktime" @blur="TasktimeBlur">
              <template slot="append">小时</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="剩余时长" prop="Surplustasktime">
            <el-input class="input1" type="text" v-model="formData.Surplustasktime">
              <template slot="append">小时</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="认定工时" prop="Cognizancetasktime" v-if="formData.Id">
            <el-input class="input1" type="text" v-model="formData.Cognizancetasktime">
              <template slot="append">小时</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="Started">
            <el-date-picker
                value-format= 'timestamp'
                class="data-form"
                v-model="formData.Started"
                type="datetime"
                :picker-options="pickerOptionsStart"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="Ended">
            <el-date-picker
                value-format= 'timestamp'
                class="data-form"
                v-model="formData.Ended"
                type="datetime"
                :picker-options="pickerOptions"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="说明">
            <el-input v-model="formData.Comment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dialog-edit>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
import projectTaskWorkApi from "@/api/projectTaskWorkApi";
import * as format from "@/filters";
export default {
  name: "workingHours",
  components: {
    dialogEdit
  },
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    modalVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
  },
  data () {
    return {
      pickerOptionsStart: {},
      pickerOptions: {},
      saveLoading: false,
      rules: {
        Tasktime: { required: true, message: '使用工时必填', trigger: 'change' },
        Started: { required: true, message: '开始时间必填', trigger: 'change' },
        Ended: { required: true, validator: this.endValidator, trigger: 'change' },
      }
    }
  },
  methods: {
    endValidator (rule, value, callback) {
      if (value) {
        if (this.formData.Started) {
          let b1 = format.formatDatetime(this.formData.Started, 'yyyy-MM-dd 00:00:00')
          let b2 = format.formatDatetime(this.formData.Started, 'yyyy-MM-dd 23:59:59')
          let a1 = new Date(b1).valueOf()
          let a2 = new Date(b2).valueOf()
          if (value.valueOf() >= a1 && value.valueOf() <= a2) {
            callback()
          } else {
            callback(new Error('结束时间和开始时间必须是用一天'))
          }
        }
      } else {
        callback(new Error('结束时间必填'))
      }
    },
    // 输入工时离开
    TasktimeBlur () {
      if (this.formData.Tasktime === '0') {
        this.formData.Tasktime = ''
      }
    },
    save () {
      this.$refs.addFormCheck.validate((v) => {
        if (v) {
          // if (this.formData.Id) {
          //   this.$message({ type:'warning', message: '暂无接口' })
          // } else {
          this.saveLoading = true
          let a = {
            Taskid: this.formData.Taskid,
            Userid: this.$store.state.user.id,
            Tasktime: (this.formData.Tasktime || '0').toString(),
            Surplustasktime: (this.formData.Surplustasktime || '0').toString(),
            Started: (this.formData.Started || '').toString(),
            Ended: (this.formData.Ended || '').toString()
          }
          if (this.formData.Id) {
            a = this.formData
            a.Type = 1
            a.Started = a.Started.toString()
            a.Ended = a.Ended.toString()
          }
          projectTaskWorkApi.create([a]).then(res => {
            if (res.hasOwnProperty('code')) {
              if (res.code === 1) {
                this.modalVisible = false
                this.$emit('saveSuccess')
              }
              this.$message({type: res.code===1?'success':'warning', message: res.message})
            }
          }).finally(() => {
            this.saveLoading = false
          })
          // }
        } else {
          this.$message({ type:'warning', message: '提交数据不足，请填写' })
          return false;
        }
      })
    }
  },
  watch: {
    modalVisible: {
      handler (n, o) {
        if (!this.formData.Ended) {
          let ended = format.formatDatetime(new Date(), 'yyyy-MM-dd') + ' 18:00'
          this.$set(this.formData, 'Ended', new Date(ended).valueOf())
        }
        if (!this.formData.Started) {
          let started = format.formatDatetime(new Date(), 'yyyy-MM-dd') + ' 09:00'
          this.$set(this.formData, 'Started', new Date(started).valueOf())
        }
      }
    },
    'formData.Tasktime': {
      handler (n, o) {
        if (!n) this.formData.Tasktime = ''
        else {
          if (/^([0-9]{1,5}|[0-9]{1,5}.[0-9]{0,1})$/.test(n)) {
            this.formData.Tasktime = n
          } else {
            this.formData.Tasktime = o
          }
        }
      }
    },
    'formData.Started': {
      handler (n, o) {
        if (n) {
          let that = this
          if (that.$refs.addFormCheck) {
            that.$refs.addFormCheck.validateField('Ended')
          }
          this.pickerOptionsStart = {
            disabledDate (time) {
              let s = new Date()
              let s1 = s.valueOf() - 86400 * 1000
              let b1 = format.formatDatetime(s1, 'yyyy-MM-dd 00:00:00')
              let b2 = format.formatDatetime(s.valueOf(), 'yyyy-MM-dd 23:59:59')
              let a1 = new Date(b1).valueOf()
              let a2 = new Date(b2).valueOf()
              return !(time.valueOf() >= a1 && time.valueOf() <= a2)
              // return true
            }
          }
          this.pickerOptions = {
            disabledDate (time) {
              let b1 = format.formatDatetime(that.formData.Started, 'yyyy-MM-dd 00:00:00')
              let b2 = format.formatDatetime(that.formData.Started, 'yyyy-MM-dd 23:59:59')
              let a1 = new Date(b1).valueOf()
              let a2 = new Date(b2).valueOf()
              return !(time.valueOf() >= a1 && time.valueOf() <= a2)
              // return true
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.elrow {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.data-form {
  width: 100%;
}
</style>